import 'package:flutter/material.dart';

class FormDemo extends StatelessWidget {
  const FormDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MaterialCommponents'),
        elevation: 0,
      ),
      body: Theme(
        data: ThemeData(
          primaryColor: Colors.black,
        ),
        child:Container(
          padding: const EdgeInsets.all(16),
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RegisterFormDemo(),
            ],
          ),
        ),
      ),
    );
  }
}


class RegisterFormDemo extends StatefulWidget {
  const RegisterFormDemo({super.key});

  @override
  State<RegisterFormDemo> createState() => _RegisterFormDemoState();
}

class _RegisterFormDemoState extends State<RegisterFormDemo> {

  final registerFormKey = GlobalKey<FormState>();

  String ? userName;
  String ? passWord;
  bool autovalidate = false;

  void submitRegisterForm () {

    if (registerFormKey.currentState!.validate()) {  
      registerFormKey.currentState!.save();  

      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('正在注册。。。'))
      );
      
      debugPrint('username: $userName');  
      debugPrint('password: $passWord');  

    } else {  
      setState(() {  
        autovalidate = true;  
      });  

    }
      debugPrint('cu: $userName');  
      debugPrint('cp: $passWord');  
      
  }
  

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child:Column(
        children: [
          TextFormField(
            decoration: const InputDecoration(
              labelText: "手机号",
              hintText: "手机号或邮箱",
              prefixIcon: Icon(Icons.person)
            ),
            onSaved: (newValue) {
              userName = newValue;
              // if(newValue != null && newValue != ''){
              //   userName = newValue;
              // }
            },
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请注意，输入。。。';
              }
              return null;
            },
          ),
          TextFormField(
            obscureText: autovalidate,
            decoration: const InputDecoration(
              labelText: "密码",
              hintText: "您的登录密码",
              prefixIcon: Icon(Icons.lock)
            ),
            onSaved: (newValue) {
              passWord = newValue;
              // if(newValue != null && newValue != ''){
              //   passWord = newValue;
              // }
            },
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请注意，输入。。。';
              }
              return null;
            },
          ),
          const SizedBox(height: 20,),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              style: ButtonStyle(
                elevation: MaterialStateProperty.all(8)
              ),
              // ignore: avoid_print
              onPressed: submitRegisterForm,
              child: const Text('登录',style: TextStyle(color: Colors.white),),
            ),
          )
        ],
      ),
    );
  }
}


class TextFieldDemo extends StatefulWidget {
  const TextFieldDemo({super.key});

  @override
  State<TextFieldDemo> createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // textEditingController.text = 'hi';
    _textEditingController.addListener(() {
      debugPrint('input:${_textEditingController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _textEditingController,
      // onChanged: (value) => debugPrint(value),
      onSubmitted: (value) => debugPrint('submit:$value'),
      decoration: const InputDecoration(
        icon: Icon(Icons.subject),
        labelText: 'title',
        hintText: 'Enter the post title',
        // border: InputBorder.none,
        // border: OutlineInputBorder(),
        filled: true,
      ),
    );
  }
}


class ThemeDemo extends StatelessWidget {
  const ThemeDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).highlightColor,
    );
  }
}